<template>
  <div id="searchlist">
    <div class="searchcontent">
      <search
      @on-change="getResult"
      :results="results"
      placeholder="商品名称/积分数量"
      v-model="searchtxt"
      position="static"
      auto-scroll-to-top top="0"
      @on-focus="onFocus"
      @on-cancel="onCancel"
      @on-submit="onSubmit"
      ref="searchtalk"></search>
    </div>
    <scroller class="" height="-44" scrollbar-y lock-x @on-scroll-bottom="onScrollTalkBottom" slot="searchslot" ref="allsearch">
      <div class="searcharr" name="searchslot">
        <cell :title="aitem.title" @click.native="routeto('productdetail', { id: aitem.id })" :border-intent="false" v-for="(aitem, aindex) in talklists" :key="aindex">
          <div class="searchdesc" slot="after-title"><span class="hotcolor">{{ aitem.price }}</span>积分<a href="javascript:;" @click.stop="fastToBuy(aindex)">兑换</a></div>
          <img class="searchimg" slot="icon" :src="aitem.img" alt="">
        </cell>
        <load-more :value="isloadtalk" :show-loading="isloadtalk" :tip="loadtip" style="margin: .5rem auto;">Loading</load-more>
      </div>
    </scroller>
    <loading :show="buyloadtoast" :text="'加载中...'"></loading>
  </div>
</template>

<script>
  import { Search, Cell, XButton, Tab, TabItem, Badge, LoadMore, Scroller, Loading } from 'vux'

  export default {
    name: 'searchlist',
    components: {
      Search,
      Cell,
      XButton,
      Badge,
      Tab,
      TabItem,
      LoadMore,
      Scroller,
      Loading
    },
    data () {
      return {
        isshowmore: false,
        isloadtalk: false,
        onFetching: false,
        talkUpList: [],
        talklists: [],
        seachTalkList: [],
        results: [],
        searchtxt: '',
        loadtip: '',
        buyloadtoast: false
      }
    },
    created () {
      let that = this
      document.addEventListener('WeixinJSBridgeReady', function () {
        that.$refs.searchtalk.setFocus()
      }, false)
      // this.$axios.post(this.apidomain + '/api/integralMall/queryProductInfoType/' + this.getCookie('appid'), {
      //   openId: this.getCookie('openid'),
      //   pageIndex: 0,
      //   type: 'all',
      //   ordertype: 'all',
      //   reorder: ''
      // })
      // .then((response) => {
      //   this.talklists.push.apply(this.talklists, response.data.data)
      // })
    },
    methods: {
      getList: function (txt) {
        return this.$axios.post(this.apidomain + '/api/integralMall/queryProductInfoListSearch/' + this.getCookie('appid'), {
          pageIndex: this.talklists.length,
          openId: this.getCookie('openid'),
          name: txt
        })
        .then((response) => {
          return response.data.data
        })
        .catch(function (error) {
          console.log(error)
          return []
        })
      },
      onScrollTalkBottom () {
        if (this.onFetching) {
          if (!this.isloadtalk) {
            this.isloadtalk = true
            this.loadtip = '加载中'
            this.getList(this.searchtxt)
            .then((data) => {
              this.talklists.push.apply(this.talklists, data)
            }, () => {})
            this.$nextTick(() => {
              this.$refs.allsearch.reset()
            })
            setTimeout(() => {
              this.isloadtalk = false
              this.loadtip = ''
            }, 1000)
          } else {
            this.$nextTick(() => {
              this.$refs.allsearch.reset()
            })
          }
        } else {
          this.onFetching = true
          setTimeout(() => {
            this.onFetching = false
          }, 1000)
        }
      },
      getResult (val) {
        this.talklists = []
        this.searchtxt = val
        window.zhuge.track('Click', {
          '事件名称': '会员中心-积分商城-搜索-点击',
          'OpenID': this.getCookie('openid'),
          '点击时间': (new Date().toLocaleString())
        })
        // 发生变化
        this.getList(val)
        .then((data) => {
          this.talklists = data
        }, () => {})
        this.$nextTick(() => {
          this.$refs.allsearch.reset({top: 0})
        })
      },
      onSubmit () {
        this.$refs.searchtalk.setBlur()
        this.$vux.toast.show({
          type: 'text',
          position: 'top',
          text: 'on submit'
        })
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        this.searchtxt = ''
        this.talklists = []
        setTimeout(() => {
          this.$nextTick(() => {
            this.$refs.allsearch.reset({top: 0})
          })
        }, 100)
      },
      fastToBuy: function (index) {
        let buyinfo = this.talklists[index]
        if (buyinfo.type === '1') {
          this.buyloadtoast = true
          if (confirm('本次兑换将消耗' + 1 * buyinfo.price + '积分，兑换成功后可至兑换记录页面查看，确认兑换吗？')) {
            let sdata = [{
              'id': buyinfo.id,
              'num': 1,
              'weight': ''
            }]
            this.$axios.post(this.apidomain + '/api/integralMall/saveConfirmOrder/' + this.getCookie('appid'), {
              data: sdata,
              openId: this.getCookie('openid'),
              name: '',
              phone: '',
              address: '',
              province: '',
              city: '',
              district: ''
            })
            .then((response) => {
              if (response.data.errorCode === '0') {
                this.routeto('orderdetail', {id: response.data.data.id})
              } else {
                window.alert(response.data.errorMsg)
              }
            })
            this.showalert = true
          }
          this.buyloadtoast = false
        } else {
          this.routeto('productdetail', {id: buyinfo.id})
        }
      }
    }
  }
</script>

<style lang="less">
@import '../assets/less/search/list.less';
</style>
